import { isOn } from './utils.js'
// 将vnode转成真实dom函数
function render(vnode, container) {
  // 判断vnode为空，说明是个空节点，直接卸载
  if (vnode == null) return
  // 将vnode转换成真实dom
  processElement(vnode, container)
}

// 创建vnode节点函数
function h(tagName, props, children) {
  return {
    type: tagName.toLowerCase(),
    props: props,
    children: children
  }
}

// 处理元素
function processElement(vnode, container) {
  mountElement(vnode, container)
}

// 挂在元素
function mountElement(vnode, container) {
  let el
  const { props } = vnode
  // 设置元素
  el = vnode.el = createElement(vnode.type)
  // 判断vnode.children是否是数组，是数组创建子元素，不是创建text元素
  if (Array.isArray(vnode.children)) {
  } else {
    setElementText(el, vnode.children)
  }
  // 设置props
  if (props) {
    for (const key in props) {
      patchProp(el, key, null, props[key])
    }
  }
  container.appendChild(el)
}

// 创建元素
function createElement(tag) {
  const el = document.createElement(tag)
  return el
}

// 设置元素文本
function setElementText(el, text) {
  el.textContent = text
}

// 设置属性
function patchProp(el, key, prevValue, nextValue) {
  if (key === 'class') {
    // 设置class属性
    patchClass(el, nextValue)
  } else if (isOn(key)) {
    // 判断事件
    patchEvent(el, key, prevValue, nextValue)
  }
}

// 设置class属性
function patchClass(el, value) {
  if (!value) {
    el.removeAttribute('class')
  } else {
    el.className = value
  }
}

function patchEvent(el,key,prevValue,nextValue){
  el.addEventListener(key.slice(2).toLowerCase(),nextValue)
}

// 暴露render函数和h函数
export default { render, h }
